/**
 * 变量文件
 * 定义全局使用的颜色、字体、尺寸等变量
 */

// 颜色系统
$color-primary: #1a73e8;
$color-primary-light: #4285f4;
$color-primary-dark: #0d47a1;

$color-secondary: #34a853;
$color-secondary-light: #46c267;
$color-secondary-dark: #1e8e3e;

$color-accent: #ea4335;
$color-accent-light: #ef5350;
$color-accent-dark: #c62828;

$color-warning: #fbbc05;
$color-warning-light: #fdd835;
$color-warning-dark: #f57f17;

// 灰度
$color-gray-50: #f8f9fa;
$color-gray-100: #f1f3f4;
$color-gray-200: #e8eaed;
$color-gray-300: #dadce0;
$color-gray-400: #bdc1c6;
$color-gray-500: #9aa0a6;
$color-gray-600: #80868b;
$color-gray-700: #5f6368;
$color-gray-800: #3c4043;
$color-gray-900: #202124;

// 语义颜色
$color-text-primary: $color-gray-900;
$color-text-secondary: $color-gray-700;
$color-text-tertiary: $color-gray-600;
$color-text-disabled: $color-gray-500;

$color-background-primary: #ffffff;
$color-background-secondary: $color-gray-50;
$color-background-tertiary: $color-gray-100;

$color-border: $color-gray-300;
$color-divider: $color-gray-200;

$color-success: $color-secondary;
$color-error: $color-accent;
$color-info: $color-primary;

// 状态颜色
$color-status-active: #34a853;
$color-status-inactive: #9aa0a6;
$color-status-warning: #fbbc05;
$color-status-danger: #ea4335;

// 字体家族
$font-family-base: 'Nunito Sans', 'Helvetica Neue', sans-serif;
$font-family-heading: $font-family-base;
$font-family-monospace: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;

// 字体大小
$font-size-xs: 0.75rem;    // 12px
$font-size-sm: 0.875rem;   // 14px
$font-size-base: 1rem;     // 16px
$font-size-md: 1.125rem;   // 18px
$font-size-lg: 1.25rem;    // 20px
$font-size-xl: 1.5rem;     // 24px
$font-size-2xl: 1.875rem;  // 30px
$font-size-3xl: 2.25rem;   // 36px

// 字体粗细
$font-weight-light: 300;
$font-weight-normal: 400;
$font-weight-medium: 500;
$font-weight-semibold: 600;
$font-weight-bold: 700;

// 行高
$line-height-tight: 1.25;
$line-height-base: 1.5;
$line-height-loose: 1.75;

// 间距
$spacing-0: 0;
$spacing-1: 0.25rem;  // 4px
$spacing-2: 0.5rem;   // 8px
$spacing-3: 0.75rem;  // 12px
$spacing-4: 1rem;     // 16px
$spacing-5: 1.25rem;  // 20px
$spacing-6: 1.5rem;   // 24px
$spacing-8: 2rem;     // 32px
$spacing-10: 2.5rem;  // 40px
$spacing-12: 3rem;    // 48px
$spacing-16: 4rem;    // 64px
$spacing-20: 5rem;    // 80px
$spacing-24: 6rem;    // 96px
$spacing-32: 8rem;    // 128px

// 边框圆角
$border-radius-sm: 0.125rem;  // 2px
$border-radius-base: 0.25rem; // 4px
$border-radius-md: 0.375rem;  // 6px
$border-radius-lg: 0.5rem;    // 8px
$border-radius-xl: 0.75rem;   // 12px
$border-radius-full: 9999px;

// 阴影
$shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
$shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
$shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
$shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
$shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
$shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);

// Z-index层级
$z-index-dropdown: 1000;
$z-index-sticky: 1020;
$z-index-fixed: 1030;
$z-index-modal-backdrop: 1040;
$z-index-modal: 1050;
$z-index-popover: 1060;
$z-index-tooltip: 1070;

// 导出变量为CSS自定义属性
:root {
  // 颜色
  --color-primary: #{$color-primary};
  --color-primary-light: #{$color-primary-light};
  --color-primary-dark: #{$color-primary-dark};
  
  --color-secondary: #{$color-secondary};
  --color-secondary-light: #{$color-secondary-light};
  --color-secondary-dark: #{$color-secondary-dark};
  
  --color-accent: #{$color-accent};
  --color-accent-light: #{$color-accent-light};
  --color-accent-dark: #{$color-accent-dark};
  
  --color-warning: #{$color-warning};
  --color-warning-light: #{$color-warning-light};
  --color-warning-dark: #{$color-warning-dark};
  
  // 灰度
  --color-gray-50: #{$color-gray-50};
  --color-gray-100: #{$color-gray-100};
  --color-gray-200: #{$color-gray-200};
  --color-gray-300: #{$color-gray-300};
  --color-gray-400: #{$color-gray-400};
  --color-gray-500: #{$color-gray-500};
  --color-gray-600: #{$color-gray-600};
  --color-gray-700: #{$color-gray-700};
  --color-gray-800: #{$color-gray-800};
  --color-gray-900: #{$color-gray-900};
  
  // 语义颜色
  --color-text-primary: #{$color-text-primary};
  --color-text-secondary: #{$color-text-secondary};
  --color-text-tertiary: #{$color-text-tertiary};
  --color-text-disabled: #{$color-text-disabled};
  
  --color-background-primary: #{$color-background-primary};
  --color-background-secondary: #{$color-background-secondary};
  --color-background-tertiary: #{$color-background-tertiary};
  
  --color-border: #{$color-border};
  --color-divider: #{$color-divider};
  
  --color-success: #{$color-success};
  --color-error: #{$color-error};
  --color-info: #{$color-info};
  
  // 状态颜色
  --color-status-active: #{$color-status-active};
  --color-status-inactive: #{$color-status-inactive};
  --color-status-warning: #{$color-status-warning};
  --color-status-danger: #{$color-status-danger};
  
  // 字体
  --font-family-base: #{$font-family-base};
  --font-family-heading: #{$font-family-heading};
  --font-family-monospace: #{$font-family-monospace};
  
  // 其他...
  --card-bg: #{$color-background-primary};
} 